<template>
    <footer id="framework_footer">
        <section>
            left
        </section>
        <section>
            center
        </section>
        <section>
            right
        </section>



    </footer>
</template>

<script setup>
import { watch, ref } from 'vue'

const show = ref(false)







/////////////////////////////////////////////////
/////////////////////////////////////////////////
// handle props
const props = defineProps({
    show: { type: Boolean, default: false },
})
////////////////////////
// handle update
watch(() => props.show, (nv) => { show.value = nv })
////////////////////////
// handle returns
const emit = defineEmits(['update:returns', 'update:page'])
/*function handleReturn() {
    //Parent use @update:return="myfunction(event)" to receive
    //Handler: function myfunction(event: { show: boolean, data: object })
    emit('update:returns',{
        show: false,data: {}
    })
}*/
/////////////////////////////////////////////////
/////////////////////////////////////////////////


</script>

<style scope lang="scss">
#framework_footer {
    width: 100%;
    background-color: var(--framework-footer-bg-color);
    //border-top: 1px solid var(--framework-footer-border-color);
    height: var(--framework-footer-height);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 0.5rem;
    color: whitesmoke;
    section {
        display: flex;
        align-items: center;
    }
}
</style>